import React from "react";
import './payment.css'
import { NavBar, Space, Toast, Radio } from 'antd-mobile'
import { CloseOutline, MoreOutline, SearchOutline, AlipaySquareFill } from 'antd-mobile-icons'
import { useLocation, useNavigate } from "react-router-dom";
import axios from 'axios'

export default function Really() {
    const location = useLocation()
    const result = location.state
    console.log(result)
    const navigate = useNavigate()
    console.log(result)
    const back = () => {
        Toast.show({
            content: '点击了返回区域',
            duration: 1000,
            
        })
        navigate(-1)
    }

    const getPayData = async () => {  
        let data = result; // 请确保 result 已正确定义  
        axios({  
            url: "http://localhost:3000/ycf/payment",  
            method: "post",  
            headers: { // 注意这里 "Headers" 应该改为 "headers"  
                "Content-Type": "application/x-www-form-urlencoded"  
            },  
            data: data,  
        }).then(async (res) => { // 将此函数改为 async，以便使用 await  
            window.location.href = res.data.data.paymentUrl;  
            
            const updateCate = async () => {  
                let res = await axios.post('http://localhost:3000/ycf/updateCate',result);  
                if (res.data.code == 200) {  
                    // 在这里处理成功的逻辑  
                    console.log('更新成功');  
                } else {  
                    // 在这里处理失败的逻辑  
                    console.log('更新失败');  
                }  
            };  
    
            // 调用 updateCate 函数  
            await updateCate(); // 如果需要等待 updateCate 完成，使用 await  
        }).catch((error) => {  
            // 处理错误  
            console.error("出错了:", error);  
        });  
    };

    return (
        <div className="really-box">
            <div className="really-title">
                <NavBar onBack={back}>选择支付</NavBar>
            </div>
            <div className="really-content">
                <div className="really-content-top">
                    <h1 className="really-top">￥{result.orderPrice}</h1>
                    <h2 className="really-top1">{result.name}</h2>
                    <h3 className="really-top2">{result.type.store}</h3>
                </div>
                <div className="really-content-bottom">
                <AlipaySquareFill color='var(--adm-color-primary)' fontSize={50} style={{marginRight:300}} />
                    <Radio.Group defaultValue='1'>
                        <Space direction='vertical'>
                            <Radio
                                value='large'
                                style={{
                                    '--icon-size': '20px',
                                    '--font-size': '16px',
                                    '--gap': '10px',
                                }}
                            >
                                   
                            </Radio>
                        </Space>
                    </Radio.Group>
                       
                </div>
                <button className="really-button"
                    onClick={()=>{
                        getPayData()
                    }}
                >￥{result.orderPrice} 确认下单</button>
            </div>
        </div>
    )
}